﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 统计快捷方式样式 */
        .console-link-block {
            font-size: 16px;
            padding: 27px 20px;
            border-radius: 4px;
            background-color: #9BC539;
            color: rgba(255, 255, 255, .8);
            box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
            position: relative;
            overflow: hidden;
            height: 66px;
        }

            .console-link-block .console-link-block-num {
                font-size: 28px;
                margin-bottom: 5px;
                color: rgba(255, 255, 255, .9);
            }

            .console-link-block .console-link-block-icon {
                position: absolute;
                top: 50%;
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 50px;
                line-height: 50px;
                margin-top: -25px;
                color: rgba(255, 255, 255, .65);
            }

            .console-link-block .console-link-block-band {
                width: 80px;
                line-height: 1;
                padding: 4px 0;
                font-size: 12px;
                text-align: center;
                background-color: #E32A16;
                color: rgba(255, 255, 255, .8);
                position: absolute;
                top: 8px;
                right: -20px;
                transform: rotate(45deg);
                transform-origin: center;
                z-index: 1;
            }

        /** 设置每个快捷块的颜色 */
        .layui-row > div:nth-child(2) .console-link-block {
            background-color: #55A5EA;
        }

        .layui-row > div:nth-child(3) .console-link-block {
            background-color: #9DAFFF;
        }

        .layui-row > div:nth-child(4) .console-link-block {
            background-color: #F591A2;
        }

        .layui-row > div:nth-child(5) .console-link-block {
            background-color: #FEAA4F;
        }

        .layui-row > div:nth-child(6) .console-link-block {
            background-color: #9DAFFF;
        }

        .layui-row > div:nth-child(7) .console-link-block {
            background-color: #F591A2;
        }

        .layui-row > div:nth-child(8) .console-link-block {
            background-color: #FEAA4F;
        }

        .layui-row > div:nth-child(9) .console-link-block {
            background-color: #55A5EA;
        }

        .layui-row > div:last-child .console-link-block {
            background-color: #9BC539;
        }

        .layui-row .layui-elem-quote {
            margin-left: 8px;
            margin-top: 10px;
            margin-right: 10px;
        }

        #cpuProgress svg, #ramProgress svg {
            width: 180px;
            height: 180px;
        }
    </style>
</head>

<body>
    <!-- 正文开始 -->
    <div class="layui-fluid ew-console-wrapper">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-lg2 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_processorCount">&nbsp;</div>
                    <div class="console-link-block-text">CPU核心数</div>
                    <i class="console-link-block-icon layui-icon layui-icon-app"></i>
                </div>
            </div>
            <div class="layui-col-lg2 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_startTime">&nbsp;</div>
                    <div class="console-link-block-text">启动时间</div>
                </div>
            </div>
            <div class="layui-col-lg4 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_serviceName">&nbsp;</div>
                    <div class="console-link-block-text">服务器名称</div>
                    <i class="console-link-block-icon layui-icon layui-icon-chart-screen"></i>
                </div>
            </div>
            <div class="layui-col-lg4 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_systemOs">&nbsp;</div>
                    <div class="console-link-block-text">操作系统</div>
                    <i class="console-link-block-icon layui-icon layui-icon-windows"></i>
                </div>
            </div>
            <div class="layui-col-lg4 layui-col-sm6 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" style="font-size:24px;" id="console_ipLocation">&nbsp;</div>
                    <div class="console-link-block-text">IP位置</div>
                    <i class="console-link-block-icon layui-icon layui-icon-location"></i>
                </div>
            </div>
            <div class="layui-col-lg2 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_ip">&nbsp;</div>
                    <div class="console-link-block-text">外网IP</div>
                </div>
            </div>
            <div class="layui-col-lg2 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_lanIp">&nbsp;</div>
                    <div class="console-link-block-text">局域网IP</div>
                </div>
            </div>
            <div class="layui-col-lg2 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_frameworkDescription">&nbsp;</div>
                    <div class="console-link-block-text">.net core</div>
                </div>
            </div>
            <div class="layui-col-lg2 layui-col-sm4 layui-col-xs6">
                <div class="console-link-block">
                    <div class="console-link-block-num" id="console_osArchitecture">&nbsp;</div>
                    <div class="console-link-block-text">系统架构</div>
                </div>
            </div>
        </div>
        <!-- 统计图表 -->
        <div class="layui-row layui-col-space20">
            <div class="layui-col-sm4 layui-col-xs6">
                <div class="console-link-block" style="margin-bottom:14px;background-color: #F591A2;">
                    <div class="console-link-block-num" id="console_ramUse">&nbsp;</div>
                    <div class="console-link-block-text">项目占用内存</div>
                    <i class="console-link-block-icon layui-icon layui-icon-template-1"></i>
                </div>
                <div class="console-link-block" style="background-color: #55A5EA;">
                    <div class="console-link-block-num" id="console_runTime">&nbsp;</div>
                    <div class="console-link-block-text">系统已启动</div>
                    <i class="console-link-block-icon layui-icon layui-icon-time"></i>
                </div>
            </div>
            <div class="layui-col-sm4 layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">CPU使用率</div>
                    <div class="layui-card-body">
                        <div id="cpuProgress" class="text-center"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm4 layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">内存使用率</div>
                    <div class="layui-card-body">
                        <div id="ramProgress" class="text-center"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script src='/assets/libs/echarts/echarts.min.js'></script>
    <script>
        layui.use(['layer', 'admin', 'setter', 'CircleProgress'], function () {
            var layer = layui.layer;
            var admin = layui.admin;
            var setter = layui.setter;
            var CircleProgress = layui.CircleProgress;

            // 初始化参数
            admin.req('/ToolManage/Server/GetServerInfo', function (res) {
                if (res.Tag === 1) {
                    for (var key in res.Data) {
                        $("#console_" + key).html(res.Data[key]);
                    }
                } else {
                    layer.msg(res.Message, { icon: 2 });
                }
            }, 'get');

            var cpuProgress = new CircleProgress('#cpuProgress', {
                max: 100,
                value: 0,
                textFormat: 'percent'
            });

            var ramProgress = new CircleProgress('#ramProgress', {
                max: 100,
                value: 0,
                textFormat: 'percent'
            });


            // 获取服务器状态
            function GetServerStatus() {
                admin.req('/ToolManage/Server/GetServerStatus', function (res) {
                    if (res.Tag === 1) {
                        $("#console_runTime").html(res.Data.RunTime);
                        cpuProgress.value = res.Data.CPURate;
                        ramProgress.value = res.Data.RAMRate;

                        setTimeout(GetServerStatus, 3000);
                    } else {
                        layer.msg(res.Message, { icon: 2 });
                    }
                }, 'get');
            }

            GetServerStatus();

        });
    </script>
</body>
</html>